
var convertDataScatterAll = function(map,data) {
    var res = [];
    for(var j = 0 ;j<map.length;j++){
        for (var i = 0; i < data.length; i++) {
            var geoCoord = map[j][data[i].name];
            if (geoCoord) {
                res.push({
                    name: person[i].username,
                    value: geoCoord.concat(data[i].value),
                });
            }

        }
    }
    // 有数据的地区的名称和value值
    console.log(res);
    return res;
};
var convertDataScatter = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = [data[i].lng,data[i].lat];
        if (geoCoord) {
            if(i==0){
                res.push({
                    name: '首发地',
                    value: geoCoord.concat(data[i].remarks),
                });
            }
            if(i == data.length-1){
                res.push({
                    name: '终点',
                    value: geoCoord.concat(data[i].remarks),
                });
            }
            res.push({
                name: i+1,
                value: geoCoord.concat(data[i].remarks),
            });
        }

    }
    return res;
};
var convertDataLine = function (data) {
    var res = [];
    for (var i = 0; i < data.length-1; i++) {
        var fromCoord = [data[i].lng,data[i].lat];
        var toCoord = [data[i+1].lng,data[i+1].lat];

        if (fromCoord && toCoord) {
            res.push({
                fromName: i,
                toName: i+1,
                coords: [fromCoord, toCoord],
                value: data[i].idIndex
            });
        }

    }
    return res;
};


var averageCenter = function(data) {
    var res=[];
    var lngNum=0.0,latNum=0.0;
    for (var i = 0; i < data.length; i++) {
        lngNum+=Number(data[i].lng);
        latNum+=Number(data[i].lat);
    }
    res.push(lngNum/data.length*1.0);
    res.push(latNum/data.length*1.0);
    return res;
};


var color = ['#a6c84c', '#ffa022', '#46bee9'];
var i = 0;
var trajectoryUrl = "/ajax/ImpPosAjax/get_trajectory";


//控制图标大小
var maxSize4Pin = 48, minSize4Pin = 20;
var max = 480, min = 9; // todo
var myChart = echarts.init(document.getElementById('dituContent'));



//初始化地图
    var series = [];
    myChart.setOption({
        bmap: {
            center: [105.233777,28.319572],
            zoom: 10,
            roam: true,
            mapStyle: {
                styleJson: [
                    {
                        'featureType': 'land',     //调整土地颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#1F1F1F'
                        }
                    },
                    {
                        'featureType': 'building',   //调整建筑物颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#04406F'
                        }
                    },
                    {
                        'featureType': 'building',   //调整建筑物标签是否可视
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'highway',     //调整高速道路颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#015B99'
                        }
                    },
                    {
                        'featureType': 'highway',    //调整高速名字是否可视
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'arterial',   //调整一些干道颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color':'#003051'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'green',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'water',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#044161'
                        }
                    },
                    {
                        'featureType': 'subway',    //调整地铁颜色
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#003051'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'all',     //调整所有的标签的边缘颜色
                        'elementType': 'labels.text.stroke',
                        'stylers': {
                            'color': '#313131'
                        }
                    },
                    {
                        'featureType': 'all',     //调整所有标签的填充颜色
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#FFFFFF'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'geometry',
                        'stylers': {
                            'lightness': -65
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'lightness': -40
                        }
                    },
                    {
                        'featureType': 'boundary',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#8b8787',
                            'weight': '1',
                            'lightness': -29
                        }
                    }]
            }
        },
        tooltip: {
            trigger: 'item',
        },
        series: series
    });
    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addControl(new BMap.MapTypeControl());
    var ecModel = myChart._model;
    var map = null;
    ecModel.eachComponent('bmap', function (bmapModel) {
        if(map == null){
            map = bmapModel.__bmap;
        }
    });

    //关闭卫星
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    //限制地图的级别
    map.setMinZoom(10);
    map.setMaxZoom(18);

    //设置放大缩小的动画效果
    setTimeout(function(){
        map.setViewport({center:[105.233777,28.319572]},{enableAnimation:true,delay:2000});

        map.setZoom(15);
    }, 2000);  //2秒后放大到14级



function loadMap(value){
    myChart.clear();
    myChart.setOption({
        bmap: {
            center: [105.233777,28.319572],
            zoom: 10,
            roam: true,
            mapStyle: {
                styleJson: [
                    {
                        'featureType': 'land',     //调整土地颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#1F1F1F'
                        }
                    },
                    {
                        'featureType': 'building',   //调整建筑物颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#04406F'
                        }
                    },
                    {
                        'featureType': 'building',   //调整建筑物标签是否可视
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'highway',     //调整高速道路颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#015B99'
                        }
                    },
                    {
                        'featureType': 'highway',    //调整高速名字是否可视
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'arterial',   //调整一些干道颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color':'#003051'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'green',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'water',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#044161'
                        }
                    },
                    {
                        'featureType': 'subway',    //调整地铁颜色
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#003051'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'all',     //调整所有的标签的边缘颜色
                        'elementType': 'labels.text.stroke',
                        'stylers': {
                            'color': '#313131'
                        }
                    },
                    {
                        'featureType': 'all',     //调整所有标签的填充颜色
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#FFFFFF'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'geometry',
                        'stylers': {
                            'lightness': -65
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'lightness': -40
                        }
                    },
                    {
                        'featureType': 'boundary',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#8b8787',
                            'weight': '1',
                            'lightness': -29
                        }
                    }]
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                console.log(params);
                return "<div class='container' style='width:300px;height:200px;'>" +
                    "<div class='top layui-row' style='width:300px;height:100px;'>"+
                    "<div class='image layui-col-sm4' style='height:100px;'>"+
                    "<img src='/static/images/special/person.jpg' width='100px' height='100px'/>" +
                    "</div>"+
                    "<div class='info layui-col-sm8'  style='height:100px;'>"+
                    "<div class='username layui-row'>姓名："+value.person.name+"</div>" +
                    "<div class='sex layui-row'>性别："+value.person.sex+"</div>" +
                    "<div class='identity layui-row'>出生日期："+value.person.born+"</div>" +
                    "<div class='family layui-row'>联系电话："+value.person.tellphone+"</div>" +
                    "<div class='nowPlace layui-row'>现居地："+value.person.nowPlace+"</div>" +
                    "</div>"+
                    "</div>"+
                    "<div class='down layui-row' style='width:300px;height:100px;'>"+
                    "<div class='intro layui-row'>事情简介：</div>" +
                    "<div class='intro layui-row'>"+params.value[2]+"</div>" +
                    "</div>"+
                    "</div>";
            }
        },
        series: [
            {
                type: 'lines',
                coordinateSystem: 'bmap',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                /*  effect: {
                      show: true,
                      period: 6,
                      trailLength: 0,
                      symbol: planePath,
                      symbolSize: 15
                  },*/
                lineStyle: {
                    normal: {
                        color: '#60ff44',
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertDataLine(value.trajectory)
            },
            {
                /* name: 'Top 5',*/
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: convertDataScatter(value.trajectory),
                symbolSize: function (val) {
                    var posi = Number(val[0]);
                    return posi/5;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        color:'#05C3F9',
                        show: true,
                        fontSize:15
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#05C3F9',
                        shadowBlur: 10,
                        shadowColor: '#05C3F9'
                    }
                },
                zlevel: 1
            },
        ]


    },true);

    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addControl(new BMap.MapTypeControl());


    var ecModel = myChart._model;
    var map = null;
    ecModel.eachComponent('bmap', function (bmapModel) {
        if(map == null){
            map = bmapModel.__bmap;
        }
    });

    //关闭卫星
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));

    //限制地图的级别
    map.setMinZoom(10);
    map.setMaxZoom(18);

    //设置放大缩小的动画效果
    setTimeout(function(){
        map.setViewport({center:averageCenter(value.trajectory)},{enableAnimation:true,delay:2000});
        map.setZoom(12);
    }, 2000);  //2秒后放大到14级
}

//注册监听事件并刷新
$('button').click(function(){
        var username = $(".search .layui-form input").val();
        $.getJSON(trajectoryUrl,"username="+username+"&&id=",function (value) {
            if(value.res == "-2"){
                layui.use("layer",function () {
                    var layer = layui.layer;
                    layer.alert('此用户名不存在', {icon: 5,title:'提示'});
                });
            }else if(value.trajectory.length == 0){
                layui.use("layer",function () {
                    var layer = layui.layer;
                    layer.alert('此用户不存在轨迹信息', {icon: 5,title:'提示'});
                });
            }else{
                loadMap(value);
            }

        });
});

$('a').click(function (){
    var perId = $(this).attr("data-id");
    $.getJSON(trajectoryUrl,"id="+perId+"&&username=",function (value) {
        loadMap(value);
    });
});




